<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>原生全屏滚动</title>
<link rel="stylesheet" tyole="text/css" href="../style/reset.css">
<style>
body {overflow: hidden;}
#menu { margin: 0; padding: 0; position: fixed; left: 10px; top: 10px; list-style-type: none; z-index: 70;}
#menu li { float: left; margin:  0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 10px 20px; background-color: #fff; color: #333; text-decoration: none;}
#menu .active a { color: #fff; background-color: #333;}

.page { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;display: none; width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0; left: 0;}
.contain { width: 100%; height: 100%; display: none; position: relative; z-index: 0;}
.current .contain, .slide .contain { display: block;}
.current { display: block; z-index: 1;}
.slide { display: block; z-index: 2;}
.swipe { display: block; z-index: 3; transition-duration: 0ms !important; -webkit-transition-duration: 0ms !important;}
.page1 {background-color: #1bbc9b;}
.page2 {background-color: #4BBFC3;}
.page3 {background-color: #7BAABE;}
.page4 {background-color: #f90;}
</style>
</head>
<body>
<ul id="menu">
	<li class="active"><a href="#">第一屏</a></li>
	<li ><a href="#">第二屏</a></li>
	<li ><a href="#">第三屏</a></li>
	<li ><a href="#">第四屏</a></li>
</ul>

<div id="pageContain">
    <div class="page page1 current">
        <div class="contain">
            第一屏
        </div>
    </div>
    <div class="page page2">
        <div class="contain">
            第二屏
        </div>
    </div>
    <div class="page page3">
        <div class="contain">
            第三屏
        </div>
    </div>
    <div class="page page4">
        <div class="contain">
            第四屏
        </div>
    </div>
</div>
<script src="fullPage.min.js"></script>
<script type="text/javascript">
(function(){
    var myFullpage = new FullPage({

      id : 'pageContain',                            // id of contain
      slideTime : 800,                               // time of slide
      continuous : false,                            // create an infinite feel with no endpoints
      effect : {                                     // slide effect
              transform : {
                translate : 'Y',                      // 'X'|'Y'|'XY'|'none'
                scale : [0, 1],                      // [scalefrom, scaleto]
                rotate : [0, 360]                       // [rotatefrom, rotateto]
              },
              opacity : [0, 1]                       // [opacityfrom, opacityto]
          },
      mode : 'wheel,touch,nav:menu',               // mode of fullpage
      easing : 'ease'                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1];
        //  ,onSwipeStart : function(index, thisPage) {   // callback onTouchStart
        //    return 'stop';
        //  }
        //  ,beforeChange : function(index, thisPage) {   // callback before pageChange
        //    return 'stop';
        //  }
        //  ,callback : function(index, thisPage) {       // callback when pageChange
        //    alert(index);
        //  };
    });
})()
</script>
</body>
</html>